<template>
    <div>
        <MyHeader headName="我的跟帖" @tojemp="$router.back()"></MyHeader>
        <div class="post-bd">
            <div class="post-item" v-for="(item,index) in list" :key="index">
                <div class="date">{{item.create_date ? item.create_date.split('T')[0] + ' ' + item.create_date.split('T')[1].substr(0,item.create_date.split('T')[1].lastIndexOf(':')) : ''}}</div>
                <div class="bei-reply" v-if="item.parent">
                    <div class="bei-user">回复：{{item.parent.user.nickname}}</div>
                    <div class="bei-yan">{{item.parent.content}}</div>
                </div>
                <div class="reply">{{item.content}}</div>
                <div class="artical">
                    <span @click="$router.push('/newsDetail/'+item.post.id)">原文：{{item.post.title}}</span>
                    <i class="iconfont iconjiantou1"></i>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MyHeader from '../../components/MyHeader'
export default {
    data(){
        return{
            list:[]
        }
    },
    components:{
        MyHeader
    },
    methods:{
        getMyPost(){
            this.$axios({
                url:'/user_comments'
            }).then(res => {
                this.list = res.data.data;
            })
        }
    },
    mounted(){
       this.getMyPost();
    }
}
</script>

<style lang="less" scoped>
.post-bd{
    padding:0 6.111vw;
    .post-item{
        border-bottom: 1px solid #D7D7D7;
        .date{
            margin-top: 4.444vw;
            font-size: 3.333vw;
            color: #A1A1A1;
        }
        .bei-reply{
            margin-top: 3.889vw;
            padding: 4.444vw 2.778vw;
            background-color: #E4E4E4;
            border-radius: 2.778vw;
            .bei-user{
                margin-bottom: 3.333vw;
                font-size: 3.333vw;
                color: #939393;
            }
            .bei-yan{
                font-size: 3.889vw;
                color: #999999;
            }
        }
        .reply{
            padding: 4.444vw 0 5.556vw 0;
            font-size: 3.889vw;
            color: #212121;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .artical{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 3.889vw;
            span{
               font-size: 3.333vw;
               color: #A1A1A1;
               white-space: nowrap;
               text-overflow: ellipsis;
               overflow: hidden;

            }
            .iconfont{
               font-size: 3.889vw;
            }
        }
    }
}
</style>